﻿@page "/docs/extensions/datagrid/features/mobile-mode"

<Seo Canonical="/docs/extensions/datagrid/features/mobile-mode" Title="Blazorise DataGrid Mobile Mode" Description="Learn Blazorise by the example. The table will have a dedicated layout for mobile devices where the columns are stacked on top of each other." />

<DocsPageTitle Path="Extensions/DataGrid/Features/Mobile Mode" AddedVersion="Added in v1.6">
    Blazorise DataGrid: Mobile Mode
</DocsPageTitle>

<DocsPageLead>
    Show the DataGrid table in a vertical mode.
</DocsPageLead>

<DocsPageSubtitle>
    Overview
</DocsPageSubtitle>

<DocsPageParagraph>
    With the Mobile Mode enabled, the table will render a dedicated layout for mobile devices where the columns are stacked on top of each other.
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Mobile Mode">
        <Paragraph>
            Click on the mobile icon in the top right corner to see the mobile mode in action.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent FullWidth Outlined FrameUrl="/docs/extensions/datagrid/features/mobile-mode-iframe">
        <DataGridMobileModeExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridMobileModeExample" />
</DocsPageSection>

<DocsPageApi>
    <DocsPageApiItem Url="docs/extensions/datagrid/api" Name="<DataGrid />" />
</DocsPageApi>